import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../../store/actions';
class Index extends Component {
  componentDidMount() {
    // 请求数据 
    // 不存在就请求 存在就不请求
    if(this.props.list.length === 0) {
      const action = actions.getList()
      this.props.dispatch(action)
    }
  }
  render() {
    const { list } = this.props
    return (
      <div>
        {
          list.length > 0 && list.map((v, i) => {
            return (
              <dl key={i}
                onClick={ () => this.props.history.push({
                  pathname: '/detail',
                  state: v
                }) }
              >
                <dt>
                  <img src={v.url} alt="" />
                </dt>
                <dd>
                  <h3>{v.title}</h3>
                  <p>{v.desc}</p>
                  <p>￥:{v.price}</p>
                </dd>
              </dl>
            )
          })
        }
      </div>
    );
  }
}

const mapState = state => state
const mapDiaptch = dispatch => ({ dispatch })

export default connect(mapState,mapDiaptch)(Index);
